// input的焦点与失去焦点
function myFocus(){
    $("input").on("focus",function(e){
        $(this).css({"outline":"1px solid #1890FF"})
    })
    $("input").on("blur",function(e){
        $(this).css({"outline":"none"})
    })
    $(".switch-btn").on("focus",function(e){
        $(this).css({"outline":"none"})
    })
    $("#tdheight>.table>tbody>tr>td:first-child>input").on("focus",function(e){
        $(this).css({"outline":"none"})
    })
    $("#inp3").on("focus",function(e){
        $(this).css({"outline":"1px solid #1890FF"})
    })   
    $("#inp2").on("focus",function(e){
        $(this).css({"outline":"1px solid #1890FF"})
    })   
    $(".btn").on("focus",function(e){
        $(this).css({"outline":"none"})
    })   

}
// 调用渲染和input焦点样式的函数
RenDer(report);


// 渲染页面
function RenDer (myarr){
    $("tbody").html("")
    $.each(myarr,(index,item) =>{
        $("tbody").append(`
            <tr>
                <td>${item.number}</td>
                <td>${item.hospital}</td>
                <td>${item.name}</td>
                <td>${item.phone}</td>
                <td>${item.myID}</td>
                <td>${item.time}</td>
                <td>${item.uptime}</td>
                <td>
                    <a href=""><span>查看详情</span></a>
                </td>
            </tr>        
        `)
    })
    for (let i = 0; i < myarr.length; i++) {
        if (myarr[i].sale == true) {
            $('tbody td:first-child input').eq(i).prop('checked', true)
        }
    }
}

// 渲染分页
function PagRenDer(num,arr){
    let jie = parseInt((num-1)*5)
    let myRenDer = []
    myRenDer = report.slice(jie,jie+5)
    RenDer(myRenDer)
}
PagRenDer(1,report)

// 分页的东西
function paGing(data){
    let zong = parseInt(data.length)
    for (let i = 1; i < (zong+1)/5; i++) {
        $("#fenye>div").append(`
            <div>
                <p>${i}</p>
            </div>
        `)
    }
    $("#fenye>div").append(`
        <div>
            <p class="iconfont">&#xe775</p>
        </div>
    `)
    paGing2()

}
paGing(report)


// 点击分页的动效，暂时还没渲染
function paGing2(){
    let fenyedian = $("#fenye>div>div")
        // 初始化，显示选中了第一个页面
    $(fenyedian[1]).css({
        "backgroundColor":"#1890FF",
        "color":"#fff",
    })

        // 判断点击的是哪个页面，然后将点击页面显示出来,并且在范围内点击跳转。
    $("#fenye>div>div").on("click",function(e){
        let shang2 = 0
        for (let i = 0; i < fenyedian.length; i++) {

                if(fenyedian[i]==this){
                    shang2 = i
                    if(i>0&&i<fenyedian.length-1){
                        $(fenyedian[i]).css({
                            "backgroundColor":"#1890FF",
                            "color":"#fff",
                        })    
                        PagRenDer(i,report)
                        let dangqian = $(fenyedian[i]).text()
                        gaiBian(dangqian)
                    }
                }else{
                    $(fenyedian[i]).css({
                        "backgroundColor":"#fff",
                        "color":"#555",
                    })
                }    
        }
    })
}


// 设置已勾选的文字显示
function Selected(data){
    let gouxuan = 0
    for (let i = 0; i < data.length; i++) {
        if(data[i].sale == true){
            gouxuan++
        }
    }
    $("#gouXuan").html(gouxuan)
    gouxuan = 0
    
    $("#tdheight>.table>tbody>tr>td:first-child>input").on("click",function(e){
        for (let i = 0; i < data.length; i++) {
            if(data[i].sale == true){
                gouxuan++
            }
        }
        $("#gouXuan").html(gouxuan)
        gouxuan = 0
    })
}

// 设置是否勾选的状态
function myCheck(data){
    $("#tdheight>.table>tbody>tr>td:first-child>input").on("click",function(e){
        $.each(data,(index,item)=>{
            if(item.number == this.id){
                if(item.sale == false){
                    item.sale = true
                }else{
                    item.sale = false
                }
            }
        })
    })
}
myCheck(report)
Selected(report)

DeleteButton()

// 点击删除按钮删除勾选项
function DeleteButton(){
    $(".queding").on("click",function(e){
        // 删除所选项
        for (let i = 0; i < report.length; i++) {
            if(report[i].sale == true){
                report.splice(i,1)
                i--
                RenDer(report)
                myCheck(report)
                Selected(report)
            }
        }
        $("#exampleModal.modal.fade.in").trigger("click")
    })
}

// 弹窗
$('#exampleModal').on('show.bs.modal', function (event) {
    var button = $(event.relatedTarget) // Button that triggered the modal
    var recipient = button.data('whatever') // Extract info from data-* attributes
    var modal = $(this)
    modal.find('.modal-title').text('你确认要删除这些数据信息吗')
    modal.find('.modal-body input').val(recipient)
  })


// 获取伪类位置，来确定是否选中，来改变状态
function initial (data){
    // 初始化选择按钮
    for (let i = 0; i < data.length; i++) {
        if(data[i].sale2 == false){
            $(".switch-btn").eq(i).trigger("click")
        }
    }
}

// 让是否上架按钮能够改变状态
function PseudoClass(data){ 
    $(".switch-btn").click(function(e){
        for (let i = 0; i < report.length; i++) {
            if(report[i].nunber == this.id){
                if(report[i].sale2 == true){
                    report[i].sale2 = false
                }
                if(report[i].sale2 == false){
                    report[i].sale2 = true
                }
            }
        }
    })
}

// 点击上架和下架
function mySell(data) {
    $(".myshang").on("click",function(e){
        for (let i = 0; i < data.length; i++) {
            if(data[i].sale == true){
                data[i].sale2 = true
            }
        }
        RenDer(report)
    })
}
PseudoClass(report)

mySell(report)
initial(report)

myFocus()

function gaiBian(num){
    for (let i = 0; i < report.length; i++) {
        $("#jilu").text(i)
        if(i==report.length-1){
            $("#zongye").text(i/5)
        }
    }
    $("#yema").text(num)
}
gaiBian(1)